<template>
  <div>
    <div :style="{height:height,width:width}" id="mainHeat"></div>
  </div>

</template>

<script>
  import {  negativeInformationHeatMap, } from "@/api/system/event";
  import {heatData} from "@/data/opinion/index"
  import * as echarts from 'echarts';
  import walden from "@/components/Echarts/theme/walden.json";
  export default {
    props: {
      height: {
        type: String,
        default: '340px'
      },
      width: {
        type: String,
        default: '100%'
      },
      eventId: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        heatData: heatData,
        heatDatas: [],
      }
    },
    watch: {

    },
    mounted() {
      this.negativeInformationHeatMap();
    },
    beforeDestroy() {

    },
    methods: {
      getNextDate(date, day) {
        var dd = new Date(date);
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "-" + m + "-" + d;
      },
      dateFtt(fmt, date) {
        var o = {
          "M+": date.getMonth() + 1,     //月份
          "d+": date.getDate(),     //日
          "h+": date.getHours(),     //小时
          "m+": date.getMinutes(),     //分
          "s+": date.getSeconds(),     //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds()    //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      },
      negativeInformationHeatMap() {

        negativeInformationHeatMap({
          dayNum: 7,
          eventId:this.eventId
        }).then(response => {
          let days = [];
          var data = [];
          var hours = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
            '07:00', '08:00', '09:00', '10:00', '11:00',
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];

          this.heatDatas = response.data.heatData
          days = response.data.dateList
          for (var i = 0; i < days.length; i++) {
            for (var j = 0; j < hours.length; j++) {
              var data1 = [i, j, 0];
              data.push(data1)
            }
          }
          let that = this
          data = data.map(function (item) {

            let filter = that.heatDatas.filter(opinionData => ( opinionData.name === days[item[0]]))
            let timeValues = filter.length === 1 ? filter[0].value : []

            let timeFilter =  timeValues.filter(timeValue => ( timeValue.name+":00" === hours[item[1]]))
            let vs = timeFilter.length === 1 ? timeFilter[0].value : 0

            return [item[1], item[0], vs || '-'];


          });
          this.heatData.title.text = ""
          this.heatData.xAxis.data = hours
          this.heatData.yAxis.data = days
          this.heatData.series[0].data = data

          var maxValue = 0;
          // 遍历json.rows数组
          for (var i = 0; i < this.heatDatas.length; i++) {
            var row = this.heatDatas[i];
            // 遍历row.value数组
            for (var j = 0; j < row.value.length; j++) {
              var value = row.value[j].value;
              // 更新最大值
              if (value > maxValue) {
                maxValue = value;
              }
            }
          }
          console.log(maxValue);
          this.heatData.visualMap.max = maxValue


          echarts.registerTheme('walden', walden)
          var mainHeat = echarts.init(document.getElementById('mainHeat'), 'walden')

          mainHeat.setOption(this.heatData)
          mainHeat.on('click', param => {
            let yIndex=param.data[1]
            that.$router.push({path: '/opinion/list', query: {timeType: "define",
                beginPublishDay:days[yIndex],
                endPublishDay:days[yIndex+1],
                sensitiveInformation: '负面',

            }});
          });
        })

      },
    }

  }
</script>
